<template>
<div class="usercenter-container">
  <van-nav-bar
    title="个人中心"
  />
  <!-- <div class="mask" v-if="!isLogin" @click="toLogin"></div> -->
  <div class="header">
    <div class="userinfo">
      <div class="avatar">
      </div>
      <div class="right">
        <div v-if="!isLogin" @click="goto('pointsRecord')">点击登录</div>
        <!-- <open-data v-if="isLogin" class="name" type="userNickName"></open-data> -->
        <div v-if="isLogin" class="name">{{user.realName}}</div>
        <div v-if="isLogin" class="level">级别：{{user.category===1?'代理':'经销商'}}</div>
      </div>
    </div>
    <div class="point">
      <van-image class="point-icon" :src="img0"></van-image>
      <text>积分：{{user.mallPoints||0}}</text>
    </div>
  </div>
  <div class="btn-box">
    <div class="active-btn" data-scanType="active" bindtap="scan">
      <van-icon name="scan" size="24px" color="fe5002" />
      <text>{{user.category === 1 ? '扫码获取积分':'扫码激活'}}</text>
    </div>
    <div class="divide-line"></div>
    <div class="check-btn" data-scanType="check" bindtap="scan">
      <van-icon name="scan" size="24px" color="#00b034" />
      <text>防伪查询</text>
    </div>
  </div>
  <div class="d-line"></div>
  <div class="cell-box">
    <van-cell is-link to="exchangeRecord">
      <template #title>
        <div class="van-cell-text">
          <van-image class="icon" :src="imgurl.zero"/>
          <text>兑换记录</text>
        </div>
      </template>
    </van-cell>
    <van-cell is-link to="pointsRecord">
      <template #title>
        <div class="van-cell-text" >
          <van-image class="icon" :src="imgurl.one"/>
          <text>积分记录</text>
        </div>
      </template>
    </van-cell>
    <van-cell is-link to="order">
      <template #title>
        <div class="van-cell-text">
          <van-image class="icon" :src="imgurl.two"/>
          <text>我的订单</text>
        </div>
      </template>
    </van-cell>
    <van-cell is-link to="address">
      <template #title>
        <div class="van-cell-text">
          <van-image class="icon" :src="imgurl.three"/>
          <text>收货地址</text>
        </div>
      </template>
    </van-cell>
  </div>
  <van-tabbar v-model="active" active-color="#31b573" inactive-color="#c3c9bf" class="mytabbar" route>
      <van-tabbar-item icon="shop-o" replace to="/home">积分商城</van-tabbar-item>
      <van-tabbar-item icon="user-o" replace to="/mine">个人中心</van-tabbar-item>
    </van-tabbar>
</div>
</template>

<script>
import img0 from '../assets/images/point.png'
import img1 from '../assets/images/exchange-record.png'
import img2 from '../assets/images/point-record.png'
import img3 from '../assets/images/order.png'
import img4 from '../assets/images/location_2.png'
import {
  QureyCode, ActiveCode
} from '@/api'
import router from '../router'
import {reactive,toRefs} from 'vue'
export default {
  name: 'mine',
  setup(props) {
    //参数
    const code = 0
    let mine = reactive({
      isLogin: false,
      userType: 2,
      user: { category: 1 },
      active:1,
      img0:img0,
      imgurl:{
        zero:img1,
        one:img2,
        two:img3,
        three:img4,
      }
    })
    const user = localStorage.getItem('userinfo')
    const token = localStorage.getItem('token')
    if (user) {
     mine.user = JSON.parse(user)
    }
    mine.isLogin = (token !== '')
    console.log('a');
    function toLogin(a){
      Dialog.confirm({
        title: '登录提示',
        message: '您还没有登录，点击确定去登录',
      })
        .then(() => {
          router.push('login')
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
      console.log('get category==>', a)
    }
    //挂载
    return{ toLogin,...toRefs(mine)}
  }
}
</script>

<style scoped>
page {
  width: 100%;
  height: 100%;
}

.mask{
  position: fixed;
  top:0;
  left: 0;
  width:100%;
  height: 100%;
  z-index: 1;
}

.usercenter-contaier {
  width: 100%;
  min-height: 100%;
  padding-bottom: calc(90px + env(safe-area-inset-top));
  background-color: #eeeeee;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 350px;
  padding: 30px 70px;
  box-sizing: border-box;
  background-color: #3ab872;
}

.header .userinfo {
  display: flex;
  align-items: center;
  width:100%;
  margin: 0 auto;
}

.avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 8px solid #7bd2a4;
  overflow: hidden;
  background-color: rgb(124, 122, 122);
}

.right {
  margin-left: 20px;
  color: #ffffff;
}

.right .name {
  font-size: 46px;
}

.right .level {
  font-size: 28px;
  font-weight: 300;
}

.header .point {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.header .point text {
  margin-left: 20px;
  color: #ffffff;
  font-weight: 200;
}

.point-icon {
  display: block;
  width: 30px;
  height: 30px;
}

.btn-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 150px;
  padding: 20px 80px;
  box-sizing: border-box;
}

.btn-box .active-btn {
  display: flex;
  align-items: center;
  color: red;
}

.btn-box .check-btn {
  display: flex;
  align-items: center;
}

.btn-box .active-btn text,
.btn-box .check-btn text {
  margin-left: 20px;
}

.btn-box .divide-line {
  height: 80%;
  width: 2px;
  background-color: #e6e6e6;
}

.d-line {
  width: 100%;
  height: 20px;
  background-color: #eeeeee;
}

.cell-box{
  padding-top: 20px;
}

.cell-box .van-cell-text{
  display: flex;
  align-items: center;
}

.cell-box .icon{
  display: block;
  width:30px;
  height: 40px;
}

.cell-box .van-cell-text text{
  margin-left: 20px;
}

.mytabbar{
  height: 100px;
}

.mytabbar /deep/ .van-icon {
    font-size: 44px!important;
}


</style>